<template>
    <div class="bigbox">
        <div class="imgbox1"><img src="../img/1d034835d49fe2b2738100f99db6bbc.png" alt=""></div>
        <div class="us">
            <div class="left">
                <div class="eng">
                    INDEX
                </div>
                <div class="china">首页</div>
            </div>
            <div class="right">
                <div>当前位置：首页</div>
            </div>
        </div>
        <hr>
        <div class="logoto">
            <div class="minbox">
                <div>公司展示</div>
            </div>
        </div>
        <!-- <hr> -->
        <div class="lun">
            <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="(item, index) in imgarry" :key="index">
                    <img :src=item alt="">
                    <h3 text="2xl" justify="center">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script lang="ts">
import { reactive } from 'vue'
export default {
    setup() {
        let imgarry = reactive([require('../img/1d034835d49fe2b2738100f99db6bbc.png'), require('../img/1d034835d49fe2b2738100f99db6bbc.png'), require('../img/1d034835d49fe2b2738100f99db6bbc.png')])

        return {
            imgarry
        }
    }
}
</script>

<style lang="less" scoped>
.bigbox {
    color: @fontcor2;
}

.imgbox1 {
    height: 300px;
    width: 100%;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }
}

.us {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        margin-left: 180px;
        margin-top: -20px;

        .eng {
            font-size: @fontsize2;
        }

        .china {
            font-size: @fontsize;
        }
    }

    .right {
        margin-right: 60px;
        margin-bottom: -45px;
    }
}

.logoto {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .minbox {
        width: 150px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        outline: 1px solid snow;
    }
}

.lun {
    width: 100%;
    height: 500px;
    padding-top: 50px;

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
}
</style>